<template>
    <div>
      <!--用户的面包屑导航-->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <router-link to="/" class="text-decoration-none">首页</router-link>
          </li>
          <li class="breadcrumb-item active" aria-current="page">
            <router-link to="/users" class="text-decoration-none">用户</router-link>
          </li>
        </ol>
      </nav>
      <div class="row">
        <div class="col-3">
          <h1>用户列表</h1>
          <div class="list-group">
            <router-link v-for="id in ids" :key="id" :to="{name:'userDetail',params:{id:id},query:{name:'刘'+id}}" class="list-group-item list-group-item-action" :class="{'active':currentId == id}">用户{{id}}</router-link>


          </div>
        </div>
        <div class="col-9">
          <router-view name="users-alert"></router-view>

          <router-view></router-view>
        </div>
      </div>

    </div>
</template>
<script>
export default {
  name:'Users',
}
</script>

<script setup>
import { ref,watch, 
  onBeforeMount, 
  onMounted, 
  onBeforeUpdate, 
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
 } from 'vue'
import { useRoute } from 'vue-router'
import router from '../../router';
const route = useRoute()
console.log(route.params.id);
const currentId = ref(null)
watch(()=>route.params.id,val=>{
    currentId.value = val
})

// 挂载阶段
onBeforeMount(() => {
  console.log('onBeforeMount - Users组件挂载之前')

})

onMounted(() => {
  console.log('onMounted - Users组件挂载完成后')
})

// 更新阶段
onBeforeUpdate(() => {
  console.log('onBeforeUpdate - Users组件数据更新，DOM更新前')
})

onUpdated(() => {
  console.log('onUpdated - Users组件数据更新，DOM更新后')
})

// 卸载阶段
onBeforeUnmount(() => {
  console.log('onBeforeUnmount - Users组件组件卸载前')
})

onUnmounted(() => {
  console.log('onUnmounted - Users组件组件卸载后')
})

// keep-alive 相关
onActivated(() => {
  console.log('onActivated - Users组件keep-alive 组件激活时')
})

onDeactivated(() => {
  console.log('onDeactivated - Users组件keep-alive 组件停用时')
})

const ids = ref([1,2,3,4,5,6,7,8,9,10]);

</script>
